<!doctype html>
<html lang="ja">
	<head>
		<meta charset="UTF-8">
		<title>wasavi test frame</title>
		<style>
			body {
				background-color:#fff;
				color:#333;
			}
			h1 {
				margin:0;
				padding:0;
				line-height:1;
			}
			#container { margin:32px 0 0 32px; }
			#textbox-container {
				display:flex;
				margin:8px 0 8px 0;
			}
			#t2 {
				box-sizing:border-box;
			    width:400px;
			    height:300px;
				margin:0 8px 0 0;
			    padding:0;
			    font:normal normal normal medium/1 "Consolas";
			}
			#t2[readonly="readonly"] {
				background-color:#eee;
			}
			#t3 {
				box-sizing:border-box;
				width:400px;
				height:300px;
				border:1px solid silver;
				padding:1px;
				flex-grow:1;
				background-color:#eee;
			    font:normal normal normal medium/1 "Consolas";
				overflow-y:scroll;
			}
			#log-container {
				display:flex;
				margin:16px 0 0 32px;
			}
			#test-log {
				flex-grow:1;
				box-sizing:border-box;
				height:300px;
				margin:0;
				border:1px solid silver;
			}
			#state {
				box-sizing:border-box;
				width:40%;
				height:300px;
				margin:0;
				background-color:#eee;
			}
		</style>
		<script>
			var section_test_text = [
				"\tfirst line", // * 1
				"dummy line",
				"",
				"\f line whose first character is form-feed", // * 4
				"\t\f line whose second character is form-feed",
				"dummy line",
				"",
				"{ line whose first character is curly brace", // * 8
				"\t{ line whose second character is curly brace",
				"dummy line",
				"",
				".SH", // * 12
				"dummy line",
				"",
				".IP",
				"",
				"\tLorem ipsum dolor sit amet. consectetur adipisicing elit.  sed do eiusmod",
				"\ttempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam",
				"",
				".H ", // * 20
				"dummy line",
				"" // * 22
			].join('\n');
			var wrap_test_text = [
				'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
				'Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. ',
				'Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. ',
				'Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.			'
			].join('\n');
			document.addEventListener('DOMContentLoaded', function () {
				function getTargetElement () {
					var useDiv = document.getElementById('use-div-checkbox').checked;
					return document.getElementById(useDiv ? 't3' : 't2');
				}
				function setText (elm, text) {
					if (elm.nodeName == 'TEXTAREA') {
						elm.value = text;
					}
					else {
						var lines = text.split('\n');
						lines.forEach(function (line, i) {
							elm.appendChild(document.createTextNode(line));
							if (i < lines.length - 1) {
								elm.appendChild(document.createElement('br'));
							}
						});
					}
				}
				function doLog (message) {
					var t = document.getElementById('test-log');
					if (!t) return;
					t.value += '\n' + Array.prototype.slice.call(arguments).join('\t');
					t.scrollTop = t.scrollHeight - t.clientHeight;
				}

				document
				.getElementById('container')
				.addEventListener('submit', function (e) {
					alert('form: submit handler');
				}, false);

				document
				.getElementById('submit-button')
				.addEventListener('click', function (e) {
					alert('submit button: click handler');
				}, false);

				document
				.getElementById('reset-button')
				.addEventListener('click', function (e) {
					e.preventDefault();

					document.getElementById('use-div-checkbox').checked = false;
					document.getElementById('readonly-checkbox').checked = false;

					document.getElementById('t1').value = '';
					document.getElementById('t2').removeAttribute('readonly');
					document.getElementById('t2').removeAttribute('disabled');
					document.getElementById('t2').value = '';
					document.getElementById('t3').textContent = '';
				}, false);

				document
				.getElementById('init-section-button')
				.addEventListener('click', function (e) {
					e.preventDefault();
					setText(getTargetElement(), section_test_text);
				}, false);

				document
				.getElementById('init-wrap-button')
				.addEventListener('click', function (e) {
					e.preventDefault();
					setText(getTargetElement(), wrap_test_text);
				}, false);

				document
				.getElementById('request-launch-wasavi')
				.addEventListener('click', function (e) {
					e.preventDefault();
					getTargetElement().focus();

					var ev = document.createEvent('CustomEvent');
					ev.initCustomEvent('WasaviRequestLaunch', false, false, 0);
					document.dispatchEvent(ev);
				}, false);

				document
				.getElementById('readonly-checkbox')
				.addEventListener('click', function (e) {
					var t = getTargetElement();
					if (t.nodeName == 'TEXTAREA') {
						if (e.target.checked) {
							t.setAttribute('readonly', 'readonly');
						}
						else {
							t.removeAttribute('readonly');
						}
					}
				}, false);

				window
				.addEventListener('load', function (e) {
					document.getElementById('t2').value = '';
					document.getElementById('t2').focus();
				}, false);

				(function () {
					function handler (e) {
						doLog(e.target.id + ': ' + e.type + '(' + Object.prototype.toString.call(e) + ') event fired.');
					}
					['t1', 't2', 't3'].forEach(function (id) {
						document.getElementById(id).addEventListener('input', handler, false);
						document.getElementById(id).addEventListener('change', handler, false);
					});
				})()
			}, false);
		</script>
	</head>
	<body>
		<h1>wasavi test frame</h1>
		<hr>
		<form id="container" action="#">
			<div><input type="text" id="t1"></div>
			<div id="textbox-container">
				<textarea id="t2" data-textarea-extension="wasavi"></textarea>
				<div id="t3" contenteditable="true"></div>
			</div>
			<div>
				<input type="submit" id="submit-button">
				<input type="reset" id="reset-button">
				<button id="init-section-button">init section test</button>
				<button id="init-wrap-button">init wrap test</button>
				<button id="request-launch-wasavi">launch wasavi</button>
				<label><input type="checkbox" id="readonly-checkbox"> Readonly</label>
				<label><input type="checkbox" id="use-div-checkbox"> Use div as target</label>
			</div>
		</form>
		<div id="log-container">
			<textarea id="test-log"></textarea>
			<div id="state"></div>
		</div>
	</body>
</html>
